<template>
  <div class="signin-wrapper">
    <el-form ref="signinForm" :model="signinForm" :rules="rules" size="large">
      <div v-if="pwdSignin">
        <el-form-item prop="username">
          <el-input
            v-model="signinForm.username"
            clearable
            placeholder="请输入用户名/手机号/邮箱"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="signinForm.password"
            type="password"
            show-password
            placeholder="请输入密码"
          />
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item prop="tel" class="tel">
          <el-input
            v-model="signinForm.tel"
            clearable
            placeholder="短信登录仅限中国大陆用户"
          >
            <template v-if="!pwdSignin" #prefix>
              <p class="tel-prefix">+86</p>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="msgCode">
          <el-input v-model="signinForm.msgCode" placeholder="请输入短信验证码">
            <template v-if="!pwdSignin" #suffix>
              <p class="send-code">
                <el-button
                  type="text"
                  :disabled="sendDisabled"
                  @click="sendCode"
                >
                  <span v-if="isResend">发送验证码</span>
                  <span v-else>重新发送</span>
                </el-button>
                <span v-if="countdown > 0" class="countdown">
                  {{ countdown }}
                </span>
              </p>
            </template>
          </el-input>
        </el-form-item>
      </div>
      <el-form-item prop="autoSign" class="auto-signin">
        <el-checkbox v-model="signinForm.autoSign"> 7天内自动登录 </el-checkbox>
        <router-link to="#" class="find-password"> 找回密码 </router-link>
      </el-form-item>
      <el-form-item class="signin-btn">
        <el-button type="primary" @click="signin('signinForm')">
          登录
        </el-button>
      </el-form-item>
    </el-form>
    <div class="signin-way">
      <span class="msg-signin" @click="msgSignin">{{ signinText }}</span>
      <el-divider direction="vertical" />
      <a href="javascript:void(0)" target="_blank">
        <i class="el-icon-third-qq-circle iconfont-default icon-qq" />
      </a>
      <a href="javascript:void(0)" target="_blank">
        <i class="el-icon-third-wechat-circle iconfont-default icon-wechat" />
      </a>
      <a href="javascript:void(0)" target="_blank">
        <i class="el-icon-third-gitee-circle iconfont-default icon-gitee" />
      </a>
    </div>
  </div>
</template>

<script>
import Format from "$js/validate";
export default {
  name: "Signin",
  data() {
    return {
      signinForm: {
        username: "",
        password: "",
        tel: "",
        msgCode: "",
        autoSign: false,
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入正确的用户名、手机号或邮箱",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入8-16位密码，区分大小写，不能使用空格！",
            trigger: "blur",
          },
        ],
        tel: [{ validator: Format.FormValidate.Form().Tel, trigger: "blur" }],
        msgCode: [
          { required: true, message: "请输入短信验证码", trigger: "blur" },
          { min: 6, max: 6, message: "请输入6位短信验证码", trigger: "blur" },
        ],
      },
      iconfontQQ: false,
      pwdSignin: true,
      sendDisabled: false,
      isResend: true,
      countdown: 0,
      timer: null,
    };
  },
  computed: {
    signinText() {
      if (this.pwdSignin) {
        return "手机短信登录";
      } else {
        return "账号密码登录";
      }
    },
  },
  methods: {
    signin(signinForm) {
      this.$refs[signinForm].validate((valid) => {
        if (valid) {
          let password = this.signinForm.password;
          if (password === "123" || !this.pwdSignin) {
            this.$store.commit("signin", this.signinForm);
            this.$store.commit("setSignStatus", false);
          } else {
            let pwdField = this.$refs.signinForm.fields[1];
            pwdField.validateState = "error";
            pwdField.validateMessage = "密码错误";
          }
        }
      });
    },
    sendCode() {
      this.$refs["signinForm"].validateField("tel", (errorMsg) => {
        if (!errorMsg) {
          this.sendDisabled = true;
          this.isResend = false;
          this.countdownComputed();
        }
      });
    },
    msgSignin() {
      this.pwdSignin = !this.pwdSignin;
      this.clearForm();
    },
    countdownComputed() {
      if (!this.timer) {
        this.countdown = 60;
        this.timer = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown--;
          }
          if (this.countdown === 0) {
            this.sendDisabled = false;
            this.clearTimer();
          }
        }, 1000);
      }
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    clearForm() {
      this.$refs["signinForm"].resetFields();
    },
  },
};
</script>

<style lang='stylus' scoped>
.el-form-item.auto-signin, .el-form-item.signin-btn {
  margin-top: 0.06rem;
}

.el-form-item .find-password {
  color: #606266;
  float: right;
}

.el-form-item .find-password:hover {
  color: #409EFF;
}

.signin-way {
  padding: 0.2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.msg-signin {
  color: var(--colorLevel2);
}

.msg-signin:hover, span.countdown {
  color: var(--colorLevel1);
  cursor: pointer;
}

.signin-way * {
  transition: all 0.3s;
}

.icon-qq:hover {
  color: var(--iconfontQQ, #49b1f5);
}

.icon-wechat:hover {
  color: var(--iconfontWechat, #28c445);
}

.icon-gitee:hover {
  color: var(--iconfontGitee, #c71d23);
}

p.tel-prefix {
  height: 100%;
  color: #1c1f21;
  font-size: 0.16rem;
  display: flex;
  align-items: center;
  padding-left: 0.15rem;
}

p.tel-prefix:hover {
  cursor: pointer;
}

.tel .el-input--prefix >>> .el-input__inner {
  padding-left: 0.57rem;
}
</style>